<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="commonHeader">
    <link rel="stylesheet" th:href="@{/css/beehive-admin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/elementui/css/index.css}">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/vue.js}"></script>

    <style>
        .el-submenu__title {
            color: #000000A6;
        }

        .el-menu-item {
            color: #000000A6;
        }
    </style>
</head>
<body>


<!-- 顶部-->
<div th:fragment="adminTop" class="admin-top">
    <ul class="layui-nav beeui-a" style="background-color: #ffffff">
        <li class="layui-nav-item">
            <span id="brand" style="font-size: 18px; color: #1890ff">Beehive Dashboard</span>
        </li>
        <li class="layui-nav-item">
            <a href="#" style="color: #000000A6">个人中心<span class="layui-badge-dot"></span></a>
        </li>
        <li class="layui-nav-item beeui-nav-item-right">
            <a href="" style="color: #000000A6"><img src="//t.cn/RCzsdCq" class="layui-nav-img">haha</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;" style="color: #000000A6">修改信息</a></dd>
                <dd><a href="javascript:;" style="color: #000000A6">安全管理</a></dd>
                <dd><a href="/admin/logout" style="color: #000000A6">退了</a></dd>
            </dl>
        </li>
        <!-- elementUI -->
        <li class="layui-nav-item beeui-nav-item-right">
            <el-tooltip class="item" effect="dark" content="点击跳转到首页" placement="left">
                <a th:href="@{/test}" type="_blank">
                    <i class="layui-icon layui-icon-link" style="color: #000000A6"></i>
                </a>
            </el-tooltip>
        </li>
    </ul>
</div>

<div id="app" style="float: left; margin-left: -15px">
    <!-- 相当于div -->
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <!-- 默认打开的一级菜单 -->
        <el-menu :default-openeds="['1']" :unique-opened="true">
            <!-- 子菜单标签 -->
            <el-submenu index="1">
                <!-- 一级菜单标题 -->
                <template slot="title"><i class="el-icon-user"></i>用户管理</template>
                <el-menu-item index="1-1" onclick="userList()">用户列表</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title"><i class="el-icon-collection"></i>图书管理</template>
                <el-menu-item index="2-1" onclick="bookList()">图书列表</el-menu-item>
                <el-menu-item index="2-2" onclick="uploadSingle()" id="addBook">单本上传</el-menu-item>
                <el-menu-item index="2-3" onclick="uploadMulti()">多本上传</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title"><i class="el-icon-chat-dot-round"></i>留言管理</template>
                <el-menu-item index="3-1">查看留言</el-menu-item>
                <el-menu-item index="3-2">删除留言</el-menu-item>
            </el-submenu>
        </el-menu>
    </el-aside>
</div>


</body>
</html>